<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-input
        v-model="listQuery.memberName"
        clearable
        class="filter-item"
        style="width: 200px;"
        placeholder="请输入学生名称"
      />
      <el-input
        v-model="listQuery.cellphone"
        clearable
        class="filter-item"
        style="width: 200px;"
        placeholder="请输入学生手机号"
      />
      <el-date-picker
        v-model="listQuery.searchTime"
        class="filter-item block"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="yyyy-MM-dd hh:mm"
        value-format="yyyy-MM-dd hh:mm"
        @change="selectTime"
      />
      <el-select
        v-model="listQuery.storeId"
        placeholder="请选择门店"
        class="filter-item"
        clearable
      >
        <el-option
          v-for="item in storeOptions"
          :key="item.storeId"
          :label="item.storeName"
          :value="item.storeId"
        />
      </el-select>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >查找</el-button>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-plus"
        @click="onAdd"
      >添加学生</el-button>
    </div>

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" width="100px" label="ID" prop="id" />

      <el-table-column align="center" label="学生姓名" prop="memberName" />

      <el-table-column align="center" label="手机号码" prop="cellphone" />

      <el-table-column align="center" label="创建门店" prop="storeName" />
      <el-table-column align="center" label="充值课次" prop="classTimes" />
      <el-table-column align="center" label="充值金额" prop="fee" />
      <el-table-column align="center" label="有效期" prop="expireDate" />
      <el-table-column align="center" label="备注" prop="remark" />
      <el-table-column align="center" label="充值时间" prop="chargeTime" />
      <el-table-column align="center" label="操作" width="260">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            @click="manageMember(scope.row.memberId)"
          >详情</el-button>
          <!-- <el-button type="primary" size="mini" @click="editMember(scope.row)">编辑</el-button> -->
          <!-- <el-button type="danger" size="mini" @click="deleteMember(scope.row.id)">删除</el-button> -->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { getAddList, deleteMember } from '@/api/user'
import { getStoreLsit } from '@/api/store/store'
import Pagination from '@/components/Pagination'

export default {
  name: 'User',
  components: { Pagination },
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        index: 0,
        size: 10,
        storeId: null,
        memberName: undefined,
        cellphone: null,
        startDate: '',
        endDate: '',
        searchTime: []
      },
      storeOptions: [],
      downloadLoading: false,
      genderDic: ['未知', '男', '女']
    }
  },
  created() {
    this.getList()
    this.getStoreLsit()
  },
  methods: {
    getStoreLsit() {
      const params = {
        index: 0,
        size: 100,
        storeName: undefined
      }
      getStoreLsit(params).then(res => {
        this.storeOptions = res.data.data.content
      })
    },
    getList(e) {
      if (e && e.page) {
        this.listQuery.index = e.page - 1
      }
      this.listLoading = true
      const data = Object.assign({}, this.listQuery)
      delete data.searchTime
      getAddList(data)
        .then(response => {
          this.list = response.data.data.content
          this.total = response.data.data.totalRecords
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    handleFilter() {
      this.listQuery.index = 0
      this.getList()
    },
    deleteMember(id) {
      this.$confirm('此操作将永久删除该学生, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const params = {
            idList: [id]
          }
          deleteMember(params).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    editMember(row) {
      this.$router.push({
        path: '/user/editUser',
        query: {
          id: row.id
        }
      })
    },
    onAdd() {
      this.$router.push({
        path: '/user/addUser'
      })
    },
    manageMember(memberId) {
      this.$router.push({
        path: '/user/manageUser',
        query: { memberId: memberId }
      })
    },
    selectTime(val) {
      if (val) {
        this.listQuery.startDate = val[0]
        this.listQuery.endDate = val[1]
      } else {
        this.listQuery.startDate = ''
        this.listQuery.endDate = ''
      }
    }
  }
}
</script>

